<template>
  <el-tabs v-model="activePanel" type="card" @tab-click="handleClick" class='tabPanel'>
    <el-tab-pane label="待处理预约" name="pending">
      <div class="app-button-container">
          <el-button type="primary" @click="dialogLeftTop1_1 = !dialogLeftTop1_1">登记预约</el-button>
          <el-button type="primary" @click= "propagandaAndEducation">手术宣教</el-button>
      </div>

      <div class="filter-container">
        <div class= 'filterBox'>
          <div class='leftPart filterPart'>
            <el-checkbox class="filter-item" style="margin-left:15px;" @change="todayAppointment">今日预约</el-checkbox>
          </div>
          <div class='rightPart filterPart'>
            <el-input style="width: 220px;" class="filter-item" placeholder="输入患者姓名/手机号后四位" v-model="filter.nameTel">
            </el-input>
            <el-input style="width: 220px;" class="filter-item" placeholder="就诊卡号/身份证号" v-model="filter.cardNo">
            </el-input>
            <el-select clearable style="width: 120px" class="filter-item" v-model="filter.origin" placeholder="预约来源">
              <el-option label="平台预约" value="origin0"></el-option>
              <el-option label="院内预约" value="origin1"></el-option>
              <el-option label="双向转诊" value="origin2"></el-option>
            </el-select>
            <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
          </div>
        </div>
      </div>
      <complex-table :hasSelection= true :list = 'tableList1' :theadList = "theadList1" :operationButtons = 'operationButtons1' @getSelectArr = 'getSelectArr' @getListByPagination = 'getTableList1'></complex-table>

      <el-dialog title="预约登记" :visible.sync="dialogLeftTop1_1">
          <el-form :model="formLeftTop1" :inline="true">
              <el-form-item label="就诊卡号" :label-width="formLabelWidth">
                  <el-input v-model="formLeftTop1.name" auto-complete="off" placeholder="请输入卡后"></el-input>
              </el-form-item>
              <el-form-item label="身份证号" :label-width="formLabelWidth">
                  <el-input v-model="formLeftTop1.name" auto-complete="off" placeholder="请输入身份证"></el-input>
              </el-form-item>
              <el-form-item label="姓名" :label-width="formLabelWidth">
                  <el-input v-model="formLeftTop1.name" auto-complete="off" placeholder="请输入姓名"></el-input>
              </el-form-item>
              <el-form-item label="性别" :label-width="formLabelWidth">
                  <el-select v-model="formLeftTop1.gender" placeholder="请选择性别" style = 'width: 188.6px'>
                      <el-option label="男" value="1"></el-option>
                      <el-option label="女" value="0"></el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="预约手术" :label-width="formLabelWidth">
                  <el-select v-model="formLeftTop1.region" placeholder="请预约手术" style = 'width: 188.6px'>
                      <el-option label="预约1" value="appointment1"></el-option>
                      <el-option label="预约2" value="appointment2"></el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="手术名称" :label-width="formLabelWidth">
                  <el-select v-model="formLeftTop1.region" placeholder="请选择手术" style = 'width: 188.6px'>
                      <el-option label="手术1" value="surgery1"></el-option>
                      <el-option label="手术2" value="surgery2"></el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="手术日期" :label-width="formLabelWidth">
                  <el-select v-model="formLeftTop1.region" placeholder="请选择手术" style = 'width: 188.6px'>
                      <el-option label="手术1" value="surgery1"></el-option>
                      <el-option label="手术2" value="surgery2"></el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="联系电话" :label-width="formLabelWidth">
                  <el-input v-model="formLeftTop1.name" auto-complete="off" placeholder="请输入联系电话"></el-input>
              </el-form-item>
              <el-form-item label="家属信息" :label-width="formLabelWidth">
                  <el-input v-model="formLeftTop1.name" auto-complete="off" placeholder="请输入家属姓名"></el-input>
              </el-form-item>
              <el-form-item label="与本人关系" :label-width="formLabelWidth">
                  <el-select v-model="formLeftTop1.region" placeholder="请选择手术" style = 'width: 188.6px'>
                      <el-option label="本人" value="surgery1"></el-option>
                      <el-option label="父亲" value="surgery2"></el-option>
                      <el-option label="母亲" value="surgery3"></el-option>
                      <el-option label="兄弟" value="surgery4"></el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="家属电话" :label-width="formLabelWidth">
                  <el-input v-model="formLeftTop1.name" auto-complete="off"></el-input>
              </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogLeftTop1_1 = false">取 消</el-button>
            <el-button type="primary" @click="dialogLeftTop1_1 = false">确 定</el-button>
          </div>
      </el-dialog>

      <el-dialog  title="手术宣教" :visible.sync="dialogLeftTop1_2" class='dialogLeftTop1_2'>
        <el-form ref="formLeftTop2" :model="formLeftTop2" label-width="80px">
          <el-form-item label="宣教类型">
            <el-select v-model="formLeftTop2.type" placeholder="请选择宣教类型">
              <el-option v-for = 'item in PAEType' :label="item.label" :value="item.value" :key = 'item.value'></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="宣教内容">
            <el-select v-model="formLeftTop2.content" placeholder="请选择宣教内容">
              <el-option v-for = 'item in PAEContent' :label="item.label" :value="item.value" :key = 'item.value'></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogLeftTop1_2 = false">取 消</el-button>
          <el-button type="primary" @click="dialogLeftTop1_2 = false">确 定</el-button>
        </div>
      </el-dialog>

    </el-tab-pane>

    <el-tab-pane label="已处理预约" name="done">
        <complex-table :hasSelection= false :list = 'tableList2' :theadList = "theadList2" :operationButtons = 'operationButtons2'></complex-table>
    </el-tab-pane>

  </el-tabs>
</template>
<script>
  import complexTable from '@/views/table/complexTable'
  import waves from '@/directive/waves/index.js'
  import { theadList1, theadList2, operationButtons1, operationButtons2, PAEType, PAEContent } from '@/yimiviews/appointmentManage/appointmentManageConst.js'
  // import { pending } from '@/api/appointmentManage'
  export default {
    components: { complexTable },
    data() {
      return {
        theadList1,
        theadList2,
        operationButtons1,
        operationButtons2,
        PAEContent,
        PAEType,
        filter: {
          nameTel: '',
          cardNo: '',
          origin: ''
        },
        activePanel: 'pending',
        dialogLeftTop1_1: false,
        dialogLeftTop1_2: false,
        formLeftTop1: {
          name: '',
          gender: '1',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLeftTop2: {
          type: '',
          content: ''
        },
        formLabelWidth: '120px',
        filterContainer: {},
        tableList1: [],
        tableList2: [],
        selectArr: []
      }
    },
    mounted() {
      this.getTableList1()
    },
    methods: {
      handleFilter() {
        this.getTableList1(this.filter)
      },
      todayAppointment() {},
      propagandaAndEducation() {
        console.log(this.selectArr.length)
        if (!this.selectArr.length) {
          this.$message({
            message: '请先选择宣教对象！',
            type: 'warning'
          })
          return
        }
        this.dialogLeftTop1_2 = true
      },
      getTodayAppointment(isToday) {
        console.log(isToday)
        const date = new Date()
        const year = date.getFullYear()
        const month = date.getMonth()
        const day = date.getDate()
        if (isToday) {
          // this.list = this.list.map((today) => {
          //   const time = today.expectTime.split('-')
          //   return time[0] === year && time[1] === month && time[2] === day
          // })
          console.log(year, month, day)
        }
      },
      getSelectArr(selectArr) {
        this.selectArr = selectArr
        console.log(this.selectArr.length)
      },
      handleClick(tab, event) {
        console.log(tab, event)
      },
      getTableList1(listQuery) {
        // pending().then((res) => {
        //   this.listLoading = false
        //   this.tableList1 = res.data.data.result
        // })
        console.log('from complex table')
        console.log(listQuery)
        this.tableList1 = [
          {
            'name': 'ming',
            'age': 20,
            'gender': '男',
            'ID': '13456789101112',
            'doctor': 'pro doctor',
            'surgery': 'shoushu',
            'expectTime': '2018-03-12',
            'telephone': '9874562122',
            'origin': 'ori 12'
          }]
        this.tableList2 = [
          {
            'name': 'hong',
            'age': 18,
            'gender': '女',
            'ID': '13456789101112',
            'doctor': 'pro doctor',
            'surgery': 'shoushu',
            'expectTime': '2018-03-12',
            'telephone': '9874562122',
            'origin': 'ori 12'
          }]
      }
    },
    directives: {
      waves
    }
  }
</script>
<style lang="scss">
  .tabPanel{
    padding-top: 10px;
    .el-tabs__header{
      padding-left: 20px;
    }
  }
  .filterBox{
    display: flex;
    justify-content: space-between;
    align-item: center;
    .filterPart{
      line-height: 2;
    }
  }
  .dialogLeftTop1_2{
    .el-select{
      display: block;
    }
  }
  
</style>
